/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Basisopbouw voor alle pagina's */
/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */

* { 
	box-sizing: border-box;
	}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 0px; 
  width: 100%;
}

html {
	font-family       : Arial, Helvetica, sans-serif;
  font-size         : 0.8em;
  color             : white;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Opbouw login */
/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */

div.login {
	margin-top: 200px;
	text-align: center;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Opbouw header (in basis_html.php) */
/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */

div.sticker {
  position          : sticky;
  top               : 0;
}

div.header {
   height           : 100px;
   background       : url(../plaatjes/headerbg.jpg);
   background-size  : 100% auto;
   background-repeat: no-repeat;
}

th {
  padding           : 5px;
}

td {
  padding-left      : 5px;
  padding-right     : 5px;
  text-align        : left; 
}

td.rechts {
  text-align        : right;
}

td.top {
  border-top        : 1px solid white; 
  padding-top       : 5px;           
}

tr.streep td {																/*beetje ruimte en streep onder rows */
 	padding-top		:	6px;
 	padding-bottom:	6px;
 	border-bottom	:	1pt solid #009999;
}	

.log {
  margin-bottom   : 20px;
  text-align      : center;
}

input[type="date"] {
  margin-top      : 12px;
	font-family     : Arial, Helvetica, sans-serif;
  background      : #262626;
  color           : white;
  border          : none;
} 

.datum {
  position        : fixed;
  top             : 102px;
  right           : 10px;
}

.paneellinks {
  position        : fixed;
  top             : 147px;
  min-width       : 100px;
  left            : 0px;
  padding         : 10px;
  background      : #262626;
  color           : white;
  text-align      : center;
}

.paneel {
  position        : fixed;
  top             : 147px;
  min-width       : 100px;
  min-height      : 10px;
  left            : 0px;
  padding         : 10px;
  background      : #262626;
  color           : white;
  text-align      : left;
  cursor          : pointer;
}

.download {
  left            : 110px;
  text-align      : left;
}

.result {
  text-align      : left;
}

.rabo {
  width           : 180px;
}

option {
  text-align      : center;
}  

.popup {
  position        : fixed;
  top             : 147px;
  width           : 40%;
  min-height      : 10px;
  left            : 30%;
  padding         : 10px;
  background      : #262626;
  border          : 1px solid white;
  color           : white;
  cursor          : pointer;
}

.paneelrechts {
  position        : fixed;
  top             : 147px;
  min-width       : 100px;
  right           : 0px;
  padding         : 10px;
  background      : #262626;
  color           : white;
  text-align      : center;
}

.paneelknop {
  width           : 80px;
}

.bankknop {
  width           : 80px;
}

button , input[type="submit"] {
  border-radius   : 3px 3px 3px 3px;
  width           : 80px;
 	margin          : 1px;
  padding         : 3px;
 	border          : 1px solid black;
	background      :	lightgrey;
  color           : black;
  cursor          : pointer;
  text-align      : center;
}

.verwerk {
  margin-top      : 40px;
}

.toetsenbord {
  display         : flex;
  justify-content : center;     /* horizontaal centreren */
  align-items     : center;     /* verticaal centreren */
  gap             : 20px;
  width           : 60px;
  margin          : auto;
  margin-bottom   : 10px;
}

.knop {
  width           : 5vw;    /* responsive grootte */
  max-width       : 30px;   /* max grootte */
  max-height      : 30px;
  aspect-ratio    : 1 / 1;   /* altijd perfect rond */
  border-radius   : 50%;
  border          : 1px solid grey; 
  background      : #333333;
  color           : white;
  display         : flex;
  align-items     : center;  /* verticaal centreren */
  justify-content : center;  /* horizontaal centreren */
  text-align      : center;
  font-size       : 1.2em;
  cursor          : pointer;
}

.orange {
  background      : orange;
  color           : white;
}


div.headertekst {
 	float           : left;
 	margin-top      : 10px;
 	padding-left    : 45px;
	color           : red;
	font-size       : 1.0em;
}

div.menuheader {
   background-color: #262626;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Basis container */
/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */

body {
	margin: 0px;
	padding: 0px;
  background-color: black;
  color: white;
  -webkit-text-size-adjust: 100%;			/* font-sizes ook op iPhone correct maken */
}

img.menu {
 	margin-top: 10px;
 	margin-left: 20px;
	height: 40px;
}

.content_grid {
	text-align: center;
}

.footer {
  position:fixed;
  z-index: 999999;
  left: 0px;
  bottom: 0px;
  padding: 10px;
  width: 100%;
/*  background: lightgrey; */
	background: #666666;
	text-align: center; 
	color: black;
	font-size: 0.8em; 
}

a:link.quasar , a:visited.quasar , a:hover.quasar , a:active.quasar {
  text-decoration: none;
 	color: black;
	cursor: pointer;
}
a:active.quasar , a:hover.quasar {
 	color: yellow;
}

label {
  display: inline-block;
  width:140px;
  margin-left: 5px;
  text-align:right;
  padding-right: 10px;
}

textarea {
  border-radius: 5px;
	padding: 2px; 
	box-shadow: 3px 3px 10px black;
	width: 216px;
	height: 50px;
	resize: vertical;
	padding: 10px;
	background: white;
	color: black;
	font-size:	1.1em;
}

input[type=text].fundainvoer {
  border-radius: 5px;
	box-shadow: 3px 3px 10px black;
	margin-bottom: 4px;
	width:	216px;
	height: 40px;
	background: white;
	color: black;
	font-size:	1.1em;
	padding-left: 5px;
	text-align:	center;
}

input[type=text].vraagprijs {
  border-radius: 5px;
	box-shadow: 3px 3px 10px black;
	margin-bottom: 4px;
	width:	216px;
	height: 40px;
	background: lightgreen;
	font-size:	1.1em;
	padding-right: 10px;
	text-align:	center;
}

select {
  border-radius: 5px;
	box-shadow: 3px 3px 10px black;
	padding: 2px;
	background-color: #0c455a;
  color: white;
  cursor: pointer;
}

button.wisselect {
  width: 180px;
  border-radius: 5px;
  border: 1px solid grey;
	box-shadow: 3px 3px 10px black;
	padding: 3px;
	background-color: #0c455a;
  color: white;
  cursor: pointer;
}

div.warning {
	text-align: center;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Zoeken */
/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */

label.zoek {
  display				: inline-block;
  width					:	90px;
  text-align		:	left;
}

input[type=text].zoek {
  border-radius	: 5px;
	box-shadow		: 3px 3px 10px black;
	margin-bottom	: 4px;
	width					:	248px;
	height				: 30px;
	background		: white;
	color					: black;
	padding-left	: 5px;
	text-align		:	left;
}

input[type=text].rekening {
  border-radius	: 5px;
	box-shadow		: 3px 3px 10px black;
	margin-bottom	: 4px;
	width					:	155px;
	height				: 30px;
	background		: white;
	color					: black;
	padding-left	: 5px;
	text-align		:	left;
}

input[type=text].decimal {
  border-radius	: 5px;
	box-shadow		: 3px 3px 10px black;
	margin-bottom	: 4px;
	width					:	155px;
	height				: 30px;
	background		: white;
	color					: black;
	padding-right	: 5px;
	text-align		:	right;
}

input[type=date].zoek {
	width					:	155px;
	height				: 30px;
	background		: white;
	color					: black;
}

input[type=radio] {
  height				: 15px;
  width					: 15px;
  cursor				: pointer;
}

select.zoek {
  border-radius	: 5px;
	box-shadow		: 3px 3px 10px black;
	margin-bottom	: 4px;
	width					:	248px;
	height				: 30px;
	background		: white;
	color					: black;
	padding				: 2px;
  cursor				: pointer;
}


/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Buttons */
/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */

button.app {
  border-radius: 15px 15px 15px 15px;
 	box-shadow   : 0px 0px 0px ;
 	margin       : 0px;
  padding      : 0px;
 	border       : 1px solid black;
	width        : 25%;
	height       : 70px;
	background   : grey;
  color        : white;
  cursor       : pointer;
  text-align   : center;
  font-size    : 2.5em;
  font-weight  : bold;
}

button.breed {
  width        : 50%;
	background   : lightgrey;
  font-weight  : normal;
  color        : black;
}

button.grey {
	background   : lightgrey;
  font-weight  : normal;
  color        : black;
}

button.rood {
	background   : red;
  color        : white;
}

button.groen {
	background   : green;
  color        : white;
}

button.cijfer {
  font-weight: bold; 
}

button.transactie {
	background:	lightgrey;
	color: black;
}

button.afbij {
  border-radius: 5px 5px 5px 5px;
	height:	50px;
	width:	142px;
	background:	lightgrey;
	color: black;
}

button.clear {
	background:	red;
}

button.ok {
	background:	green;
}

button.groep {
  width:  320px;
	height: 50px;
	background:	blue;
  font-size: 1.6em;
}

button.terug {
 	width:	320px;
	height: 50px;
	background:	grey;
  font-size: 1.6em;
}

button.maand {
 	width: 90px;
	height: 40px;
	background:	grey;
	color: white;
  font-size: 1.0em;
}

div.kopje {
 	padding: 10px;
	color: white;
  font-size: 1.3em;
}

button.opslaan {
 	width:	216px;
	height: 50px;
	background:	green;
  font-size: 1.1em;
}

button.delete {
 	width:	108px;
	height: 40px;
	background:	red;
  font-size: 1.1em;
}

button.wijzig {
 	width:	108px;
	height: 40px;
	background:	green;
  font-size: 1.1em;
}

button.overzicht {
  border-radius: 10px 10px 10px 10px;
 	box-shadow: 5px 5px 10px black;
 	margin: 3px;
 	border: none;
	width:	216px;
	height:	50px;
	background:	navy;
  color: white;
  cursor: pointer;
  text-align: center;
  font-size: 1.1em;
}

button.home {
  border-radius: 10px 10px 10px 10px;
 	box-shadow: 5px 5px 10px black;
 	margin: 3px;
 	border: none;
	width:	320px;
	height:	50px;
	background:	green;
  color: white;
  cursor: pointer;
  text-align: center;
  font-size: 1.6em;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Tekstscherm    */
/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */

.content {
	margin-top: 20px;
}

.tekstscherm {
  border-radius: 10px 10px 10px 10px;
 	box-shadow: 5px 5px 10px black;
	border: 1px solid black;
	margin-bottom: 10px;
	padding: 10px;
	padding-top: 0px;
  background: #15799e;
	color: white;
	text-align: left;
	line-height: 130%;
  letter-spacing: 1px;
}

.tekstscherm2 {
	margin-bottom: 10px;
	padding: 10px;
	padding-top: 0px;
	color: white;
	text-align: left;
	line-height: 130%;
  letter-spacing: 1px;
}

.fout {
  background-color: red;
}

img.middenkaal , img.midden {
	width: 75%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 20px;
}

img.midden {
  border-radius: 10px 10px 10px 10px;
 	box-shadow: 5px 5px 10px black;
	border: 1px solid black;
}

img.klantkaart {
  border-radius: 10px 10px 10px 10px;
 	box-shadow: 5px 5px 10px black;
	border: 1px solid black;
	width: 100%;
	max-width: 400px;
  -ms-transform: rotate(-5deg); /* IE 9 */
  -webkit-transform: rotate(-5deg); /* Chrome, Safari, Opera */
  transform: rotate(-5deg);  
}

.assorti {
	display: block;
}

div.iphonepage {
	display: none;
	text-align: center;
}

div.pageoplaptop {
	display: none;
	text-align: center;
}

div.pageopiphone {
	display: block;
  border-radius: 10px 10px 10px 10px;
 	box-shadow: 5px 5px 10px black;
	border: 1px solid black;
	margin: auto;
	margin-bottom: 5px;
	width: 90%;
	padding: 10px;
  background: green;
	color: white;
}

div.wijzig {
  border-radius: 10px 10px 10px 10px;
 	box-shadow: 5px 5px 10px black;
	border: 1px solid black;
	margin: auto;
	margin-bottom: 5px;
	width: 90%;
	max-width:	400px;
	padding: 10px;
  background: green;
	color: white;
}

div.saldo {
  border-radius: 10px 10px 10px 10px;
 	box-shadow: 5px 5px 10px black;
	border: 1px solid black;
	margin: auto;
	margin-bottom: 5px;
	width: 90%;
	max-width:	400px;
	padding: 10px;
  background: green;
	color: white;
}

div.smartonly {
	display			: block;
	margin			: auto;
	margin-top	: 5px;
	width				: 90%;
	text-align	: center;
}

div.pconly {
	display			: none;
	margin			: auto;
	margin-top	: 5px;
	width				: 90%;
	text-align	: center;
}

div.iphoneblank {
	display: block;
	margin-top: 5px;
	margin: auto;
	width: 90%;
	text-align: center;
}

div.overzicht {
  border-radius	: 10px 10px 10px 10px;
 	box-shadow		: 5px 5px 10px black;
	margin				: auto;
	padding				: 20px;
	width					: 216px;
	background		: green;
	color					: white;
	font-size			: 1.1em;
}

div.budgetpage {
  border-radius: 10px 10px 10px 10px;
 	box-shadow: 5px 5px 10px black;
	border: 1px solid black;
	margin: auto;
	margin-bottom: 5px;
	width: 90%;
	max-width:	600px;
	padding: 10px;
  background: green;
	color: white;
}

td.opentijd_l , td.opentijd_c  {
	padding-right: 8px;
  letter-spacing: 1px; 
	color: white;
	text-align: left;
}
td.opentijd_c {
	text-align: center;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Artikelen grid */
/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */

.grid , .grid_winkelwagen, .grid_menu {
	display: inline-block;
	vertical-align: middle; 
  border-radius: 10px;
	box-shadow: 5px 5px 10px black;
	width: 230px;
	height: 343px; 
	background: #f2f2f2;
  border: 1px solid black;
	margin: 0.5%;
	margin-top: 15px;
	padding: 0px;
	color: black;
	text-align: center;
}

.grid_winkelwagen {
	height: 368px;
} 

.grid_menu {
	height: 225px;
	background: grey;
	color: white;
}

.grid_inner {
	width: 100%;
	height:	173px; 
}

.grid_image {
  border-radius: 10px 10px 0px 0px;
	width: 100%; 	
	height :100%;
}

.grid_image_specs {
  border-radius: 10px 10px 10px 10px;
	box-shadow: 5px 5px 10px black;
	width: 100%; 	
	height: 100%;
}

.grid_artikel {
 	height: 15px;
	padding-left: 10px; 
	padding-right: 10px;
	font-weight: bold; 
}

.grid_tekst {
 	height: 15px;
	padding-left: 10px; 
	padding-right: 10px;
	margin-bottom: 20px;
	font-size: 0.8em;
	font-style: italic;
	text-align: left;
}

.grid_prijs {
 	padding-left: 10px;
	font-size: 1.0em;
}

.grid_aantal {
 	padding-left: 10px;
	font-size: 1.0em;
}

.grid_bedrag {
 	background: darkgrey;
 	padding-top: 10px;
 	padding-bottom: 10px;
 	color: white;
	font-size: 1.3em;
}

.grid_info , .grid_icon {
	float: left;
	margin-top: 10px;
	margin-left: 30px;
	margin-right: 30px;
	width: 30px;
}

.grid_icon {
	float: right;
	margin-right: 10px;
	margin-left: 0px;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Artikelen informatie grid */
/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */

.grid_specs {
	margin-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
}

.grid_specs_image {
  border-radius: 10px 10px 10px 10px;
	box-shadow: 5px 5px 10px black;
	width: 100%;
}

.grid_specs_balk {
  border-radius: 8px 8px 8px 8px;
	box-shadow: 3px 3px 5px black;
	margin-bottom: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	background: lightgrey; 
	text-align: center;
	color: black;
  letter-spacing: 0px;
}

.grid_specs_balk_opties {
  border-radius: 8px 8px 8px 8px;
	box-shadow: 3px 3px 5px black;
	margin-top: 10px;
	margin-bottom: 10px;
	padding-top: 10px;
	padding-left:	10px;
	padding-right	:	10px;
	padding-bottom:	20px;
	text-align: left;
	background: lightgrey; 
	color: black;
  letter-spacing: 0px;
}

.grid_specs_tekst {
	padding-left:	2%;
	padding-right: 2%;
	line-height: 150%;
}

/*---------------------------------------------------------------------------*/
/* Responsive functies																											 */
/*---------------------------------------------------------------------------*/

@media only screen and (min-width: 768px) {
  img.header 					{width			: 240px	;	margin-bottom	: 40px	;	}
	.headertekst		 		{margin-top	: 15px	;	font-size			: 3.0em	;	}  
  .zijkantlinks				{display		: block	;													}
  .zijkantrechts 			{display		: block	;													}
	.onder 							{display		: none	;													}
	.assorti						{display		: none	;													}
	.shopcart_buttondiv {text-align	: right	;													}
	div.iphonepage 			{display		: block	;													}
	div.pageopiphone		{display		: none	;													}
	div.smartonly				{display		: none	;													}
	div.pconly					{display		: block	;													}
	div.iphoneblank			{display		: none	;													}
	div.pageoplaptop		{display		: block	;													}
}

@media only screen and (min-width: 480px) {
  .col-iphone4-5 	 {width:   5.00%;}
  .col-iphone4-10  {width:  10.00%;}
  .col-iphone4-15  {width:  15.00%;}
  .col-iphone4-20	 {width:  20.00%;}
  .col-iphone4-25	 {width:  25.00%;}
  .col-iphone4-30	 {width:  30.00%;}
  .col-iphone4-35	 {width:  35.00%;}
  .col-iphone4-40	 {width:  40.00%;}
  .col-iphone4-45	 {width:  45.00%;}
  .col-iphone4-50	 {width:  50.00%;}
  .col-iphone4-55	 {width:  55.00%;}
  .col-iphone4-60	 {width:  60.00%;}
  .col-iphone4-65	 {width:  65.00%;}
  .col-iphone4-70	 {width:  70.00%;}
  .col-iphone4-75	 {width:  75.00%;}
  .col-iphone4-80	 {width:  80.00%;}
  .col-iphone4-85	 {width:  85.00%;}
  .col-iphone4-90	 {width:  90.00%;}
  .col-iphone4-95	 {width:  95.00%;}
  .col-iphone4-100 {width: 100.00%;}
}

@media only screen and (min-width: 568px) {
  .col-iphone5-5 	 {width:   5.00%;}
  .col-iphone5-10  {width:  10.00%;}
  .col-iphone5-15  {width:  15.00%;}
  .col-iphone5-20	 {width:  20.00%;}
  .col-iphone5-25	 {width:  25.00%;}
  .col-iphone5-30	 {width:  30.00%;}
  .col-iphone5-35	 {width:  35.00%;}
  .col-iphone5-40	 {width:  40.00%;}
  .col-iphone5-45	 {width:  45.00%;}
  .col-iphone5-50	 {width:  50.00%;}
  .col-iphone5-55	 {width:  55.00%;}
  .col-iphone5-60	 {width:  60.00%;}
  .col-iphone5-65	 {width:  65.00%;}
  .col-iphone5-70	 {width:  70.00%;}
  .col-iphone5-75	 {width:  75.00%;}
  .col-iphone5-80	 {width:  80.00%;}
  .col-iphone5-85	 {width:  85.00%;}
  .col-iphone5-90	 {width:  90.00%;}
  .col-iphone5-95	 {width:  95.00%;}
  .col-iphone5-100 {width: 100.00%;}
}

@media only screen and (min-width: 667px) {
  .col-iphone6-5 	 {width:   5.00%;}
  .col-iphone6-10  {width:  10.00%;}
  .col-iphone6-15  {width:  15.00%;}
  .col-iphone6-20	 {width:  20.00%;}
  .col-iphone6-25	 {width:  25.00%;}
  .col-iphone6-30	 {width:  30.00%;}
  .col-iphone6-35	 {width:  35.00%;}
  .col-iphone6-40	 {width:  40.00%;}
  .col-iphone6-45	 {width:  45.00%;}
  .col-iphone6-50	 {width:  50.00%;}
  .col-iphone6-55	 {width:  55.00%;}
  .col-iphone6-60	 {width:  60.00%;}
  .col-iphone6-65	 {width:  65.00%;}
  .col-iphone6-70	 {width:  70.00%;}
  .col-iphone6-75	 {width:  75.00%;}
  .col-iphone6-80	 {width:  80.00%;}
  .col-iphone6-85	 {width:  85.00%;}
  .col-iphone6-90	 {width:  90.00%;}
  .col-iphone6-95	 {width:  95.00%;}
  .col-iphone6-100 {width: 100.00%;}
}

@media only screen and (min-width: 736px) {
  .col-iphone7-5 	 {width:   5.00%;}
  .col-iphone7-10  {width:  10.00%;}
  .col-iphone7-15  {width:  15.00%;}
  .col-iphone7-20	 {width:  20.00%;}
  .col-iphone7-25	 {width:  25.00%;}
  .col-iphone7-30	 {width:  30.00%;}
  .col-iphone7-35	 {width:  35.00%;}
  .col-iphone7-40	 {width:  40.00%;}
  .col-iphone7-45	 {width:  45.00%;}
  .col-iphone7-50	 {width:  50.00%;}
  .col-iphone7-55	 {width:  55.00%;}
  .col-iphone7-60	 {width:  60.00%;}
  .col-iphone7-65	 {width:  65.00%;}
  .col-iphone7-70	 {width:  70.00%;}
  .col-iphone7-75	 {width:  75.00%;}
  .col-iphone7-80	 {width:  80.00%;}
  .col-iphone7-85	 {width:  85.00%;}
  .col-iphone7-90	 {width:  90.00%;}
  .col-iphone7-95	 {width:  95.00%;}
  .col-iphone7-100 {width: 100.00%;}
}

@media only screen and (min-width: 768px) {
  .col-ipad-5 	{width:   5.00%;}
  .col-ipad-10  {width:  10.00%;}
  .col-ipad-15  {width:  15.00%;}
  .col-ipad-20	{width:  20.00%;}
  .col-ipad-25	{width:  25.00%;}
  .col-ipad-30	{width:  30.00%;}
  .col-ipad-35	{width:  35.00%;}
  .col-ipad-40	{width:  40.00%;}
  .col-ipad-45	{width:  45.00%;}
  .col-ipad-50	{width:  50.00%;}
  .col-ipad-55	{width:  55.00%;}
  .col-ipad-60	{width:  60.00%;}
  .col-ipad-65	{width:  65.00%;}
  .col-ipad-70	{width:  70.00%;}
  .col-ipad-75	{width:  75.00%;}
  .col-ipad-80	{width:  80.00%;}
  .col-ipad-85	{width:  85.00%;}
  .col-ipad-90	{width:  90.00%;}
  .col-ipad-95	{width:  95.00%;}
  .col-ipad-100 {width: 100.00%;}
}

@media only screen and (min-width: 1024px) {
  .col-pc-5 	{width:   5.00%;}
  .col-pc-10  {width:  10.00%;}
  .col-pc-15  {width:  15.00%;}
  .col-pc-20	{width:  20.00%;}
  .col-pc-25	{width:  25.00%;}
  .col-pc-30	{width:  30.00%;}
  .col-pc-35	{width:  35.00%;}
  .col-pc-40	{width:  40.00%;}
  .col-pc-45	{width:  45.00%;}
  .col-pc-50	{width:  50.00%;}
  .col-pc-55	{width:  55.00%;}
  .col-pc-60	{width:  60.00%;}
  .col-pc-65	{width:  65.00%;}
  .col-pc-70	{width:  70.00%;}
  .col-pc-75	{width:  75.00%;}
  .col-pc-80	{width:  80.00%;}
  .col-pc-85	{width:  85.00%;}
  .col-pc-90	{width:  90.00%;}
  .col-pc-95	{width:  95.00%;}
  .col-pc-100 {width: 100.00%;}
  
 	.kassa_bevestig	{text-align	: right;}						/* buttons */
  
}

@media only screen and (min-width: 1583px) {      /* 1600 minus 17 voor de rechter scrollbar */
  .col-pcxl-5 	{width:   5.00%;}
  .col-pcxl-10  {width:  10.00%;}
  .col-pcxl-15  {width:  15.00%;}
  .col-pcxl-20	{width:  20.00%;}
  .col-pcxl-25	{width:  25.00%;}
  .col-pcxl-30	{width:  30.00%;}
  .col-pcxl-35	{width:  35.00%;}
  .col-pcxl-40	{width:  40.00%;}
  .col-pcxl-45	{width:  45.00%;}
  .col-pcxl-50	{width:  50.00%;}
  .col-pcxl-55	{width:  55.00%;}
  .col-pcxl-60	{width:  60.00%;}
  .col-pcxl-65	{width:  65.00%;}
  .col-pcxl-70	{width:  70.00%;}
  .col-pcxl-75	{width:  75.00%;}
  .col-pcxl-80	{width:  80.00%;}
  .col-pcxl-85	{width:  85.00%;}
  .col-pcxl-90	{width:  90.00%;}
  .col-pcxl-95	{width:  95.00%;}
  .col-pcxl-100 {width: 100.00%;}
}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Top navigatiemenu 
/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 5px;
  overflow: hidden;
}

ul.topnav li {
	float: left;
}

ul.topnav li a {
  display: inline-block;
	color: white;
  text-align: center;
  padding: 10px 10px;
  text-decoration: none;
}

ul.topnav li a:hover {
	background-color: #33b5e5;
}

ul.topnav li.icon {
	display: none;
}

@media screen and (max-width:768px) {
  ul.topnav li:not(:first-child) {display: none;} 
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

@media screen and (max-width:768px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}